import PropTypes from 'prop-types'
import React from 'react'

export default function DemoOne(props) {
  const { title, x } = props
  console.log('props::: ', title, x)
  let children = React.Children.toArray(props.children)

  let defaultSlot = [],
    content1 = [],
    content2 = []

  children.forEach(child => {
    const slot = child.props.slot
    if (slot === 'content1') {
      content1.push(child)
    } else if (slot === 'content2') {
      content2.push(child)
    } else {
      defaultSlot.push(child)
    }
  })
  return (
    <>
      <div>{title} - {x}</div>
      <br />
      {content1}
      <br />
      {content2}
      <br />
      default : {defaultSlot}
    </>
  )
}

DemoOne.defaultProps = {
  x: 0
}

DemoOne.propTypes = {
  // 类型为 number 
  x: PropTypes.number,
  // 类型为 string , 必传
  title: PropTypes.string.isRequired,
  y: PropTypes.oneOf([
    PropTypes.string,
    PropTypes.number,
  ]),
}